02. Project Management¶

Being from a design background, I’ve never had any interaction with the thing called ‘version control’. Hence, this week has been really challenging for me.

After logging in my git account on fabcloud, I felt like I had entered an alien world! I started taking online tutorials to learn git, html and markdown.

• Markdown tutorial
• Git for beginners
• Git tutorials
• Using the Command Line
• Git cheat sheet

Out of the many tutorials I went through, the above are the ones that really helped me(a beginner).

Following are the commands I mainly used¶

(Note: The good thing about markdown is that the html codes also work. Hence, I used html code for uploading images since it gives customization options for size which is not possible in markdown language.)

Changing a theme in Markdown¶

Changing a theme in MKdocs is a very simple process. Follow the steps below:

• Go to this page.
• Select the theme you want on your page. I chose “windmill”.

• Once you selected a theme, download the files by clicking on clone or download.

• Next, you need to replace the .yml file in your repository with the one you in the zip file just downloaded.

• As soon as this settings are pushed, you should see the updated theme on your website.

Uploading files on the website¶

To upload files, you have to add it to your repository and give a link to the file using:

Link name

Making the edits and uploading it on website¶

There are two ways to edit you GitLab website.

Offline method.¶

Since offline method is the more preferred method, I started working on my website by setting up git for offline use.

1. Install - Gitbash

2. Next is SSH key generation
SSH (Secure Socket Shell), is a network protocol that provides administrators with a secure way to access a remote computer. This step is to link your computer to the server.
* For that, we’ll need to run the command ssh-keygen -t rsa -C “your_email@example.com” on Gitbash * Note: Keep the location and passkey blank * Your SSH key will be created and saved.

3. Next is copying this SSH key, to your Gitlab accoount.
For that, you have to run cat ~/.ssh/id_rsa.pub in gitlab

Once, you run this, a code will be generated ending with your e-mail id.

4. Copy this code in your GitLab account in Settings>SSH Keys

After doing this, user will receive an e-mail from GitLab about the same.

To make sure if your computer can access your Gitlab account, run the ssh -T git@gitlab.com command.

5. Now, to set up a local repository, you need to pull your directory from Gitlab using git pull “your_repo_link” Note: your repo link is available on your GitLab account.

Once this is done, Git is all set on your local computer. Have a look at the Git cheat sheet to learn how to use the same.

Visual Studio Code¶

After doing this, you can use download Visual Studio Code from here which is one of many softwares that are available to edit your website using markdown language.

Visual Studio Code is basically a text editor. Once it is installed, you can go to your repo, and go to the assignment you want to edit and open it with VSC. You can write the code for your webpage here in markdown language.

Live Preview in Visual Studio Code¶

The added advantage Visual Studio Code gives is you live preview of the webpage.

For that, you need to install an extension for preview with markdown language. Click on Extensions on the left of the window and search for markdown.

Once it is installed and open, you can see the preview of the webpage you ae working on as shown.

Adding images¶

First thing is adding your images into the repo, from where they can be linked to your webpage. For this go to your offline ‘repository folder > your-name > docs > images’. You can further add folders here to sort your images but you’ll have to link them accordingly.

Since you cannot resize the images with mkdocs, I’ve used html script for adding images which gives additional customizable controls of size and alignment.

Below is the code for images in html which is also supported by markdown.

<img src="https://gitlab.fabcloud.org/academany/fabacademy/2019/labs/cept/students/dhruv-thakker/raw/master/docs/images/week2/11.png" alt="7" width="600px" align="left">

Working with git¶

Being a first time git user, I followed the below page which has a list of all the commands one uses with git.

Git Command List

• Below are the ones that I mainly used:

  • git init : Initialize a local Git repository
  • git clone ssh://git@github.com/[username]/[repository-name].git : Create a local copy of a remote repository
  • git status : Check status
  • git add . : Add all new and changed files to the staging area
  • git commit -m “[commit message]” : Commit changes
  • git pull : Update local repository to the newest commit
  • git push : Push changes to remote repository (remembered branch)

Uploading the website to online servers¶

• To upload your changes you made in your repo offline, go to the folder where your repo is saved offline, right click and select git bash here. This will launch the gitbash window with command line.

• Type the below commands there:

• Type git add .

• Then git commit -m “your commit message”

• You can check the changes after this step using git status

• Next is git push which will push your offline repo to the online servers of the account which it is connected to.

  

It takes a few minutes after this for the changes to reflect on the website.

Online Method¶

In this method, you can use the edit button on your GitLab website. The language used here is the same markdown language. You can use the preview button on the top to see a preview of the code written.

An example of a code written on Gitlab is shown below. After writing the code, all you have to do is press on commit changes button at the bottom and the changes will be reflected in the website in about a couple of minutes.

If there was an error, you’ll get an e-mail regarding the same and you can check for details in the Pipelines option in Cl/CD menu.

If there are no errors, you should see a green check mark on the page you made changes to.

Since this seemed simpler to understand for a beginner, I worked using this online method for this week.

But, now I realised the reason why I was advised to use the offline method.

Why offline method is preferred¶

1. The workflow of softwares such as Visual Studio Code is much faster than the online editor.
2. One needs to upload Images one at a time in the online method. In offline method, multiple images can be can be selected and added.
3. Visual Studio code allows user to handle multiple files at a time. While with online editor, user needs to commit to chnages in one file before starting work on another.
4. There are extensions available in Visual Studio Code to see live previews. In online method, you cannot see the preview and edit simultaneously.

Hence, I’ll be working using the offline method hereforth.